<template>
  <div class="main-detail">
      <el-tabs v-model="activeName" class="detail-tab">
        <el-tab-pane v-for="(pane,i) in componentConfig" :key="i" :label="pane.label" :name="pane.name">
          <keep-alive>
            <component 
                :inputData.sync="detailData"
                :is="pane.component"
                :ref="pane.name"
            ></component>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
  </div>

</template>

<script>

export default {
  name: "Detail",
  mixins: [],
  data() {
    return {
      detailData:{},
      activeName:"dispatchDetails",
      componentConfig: [
        {
          name: "dispatchDetails",
          label: this.$t('model.delivery'),
          component: () => import("./page/dispatchDetails.vue")
        },
        // {
        //   name: "otherDetails",
        //   label: this.$t('ex.other'),
        //   component: () => import("./page/otherDetails.vue")
        // },
      ]
    };
  },
  methods: {
    async getData(id) {
      try {
        let res = await this.$post(`/dcDeliveryOrder/${id}`);
        this.detailData = res.data;
      } catch (e) {
        this.$message.error(e);
      }
    },
    getNo(){
      this.$get(`/sysNumberRule/getSysNumberByType/11712`).then(res => {
        this.$set(this.detailData,'deliveryNo',res.data)
        this.$set(this.detailData,'deliveryStatus','14401')
        this.$set(this.detailData,'deliveryType','14801')
        this.$set(this.detailData,'materialType','14501')
      })
    },
    validate(){
      return this.$refs[this.activeName][0].validate()
    }
  },
  mounted() {
    if(this.$route.query?.id){
      this.getData(this.$route.query.id)
    }else{
      this.getNo()
    }
  },
};
</script>

<style lang="scss" scoped>
.detail-tab{
  ::v-deep .el-tabs__header{
    margin-bottom: 10px;
  }
}
</style>
